<template>
  <div class="PayResult">
    <Header title="支付结果"></Header>
    <scroller>
      <div style="padding:43px 0px 0 0px">
        <div style="text-align: center;background: #fff;padding: 24px 0" v-if="succ==1">
          <img src="static/icon/my_icon_pay_success@3x.png" alt="success" style="width: 60px;margin-top:20px">
          <div style="font-size: 16px;font-weight: 600">支付成功</div>
          <x-button type="primary" class="saveinfo" @click.native="failOk" v-if="false">重新支付</x-button>
          <x-button type="primary" class="saveinfo" @click.native="successOk">确定</x-button>
        </div>


        <div style="text-align: center;background: #fff;padding: 24px 0" v-if="succ==0">
          <img src="static/icon/pop_icon_!@3x.png" alt="success" style="width: 60px;margin-top:20px">
          <div>支付失败</div>
          <x-button type="primary" class="saveinfo" @click.native="failOk" v-if="false">重新支付</x-button>
          <x-button type="primary" class="saveinfo" @click.native="successOk">确定</x-button>
        </div>

        <div style="text-align: center;background: #fff;padding: 24px 0" v-if="succ==2">
          <img src="static/icon/pop_icon_!@3x.png" alt="success" style="width: 60px;margin-top:20px">
          <div>用户取消支付</div>
          <x-button type="primary" class="saveinfo" @click.native="failOk" v-if="false">重新支付</x-button>
          <x-button type="primary" class="saveinfo" @click.native="successOk">确定</x-button>
        </div>


        <div style="background: #fff;padding: 12px;margin-top: 12px;" v-if="couponlist.length>0">
          <div style="color: #AFAFAF;font-size: 15px;padding: 20px 6px">套餐优惠券（点击即可领取）</div>
          <div v-for="(item,index) in couponlist" :key="index" data-vue="index">
            <div class="titles" v-if="item.type===3">天数券</div>
            <div class="titles" v-if="item.type===2">满减券</div>
            <div class="titles" v-if="item.type===1">折扣券</div>
            <div class="Couponinfo" @click="Receive(item)"
                 :style="{backgroundImage:item.type===3?'url('+require('../../assets/my_bg_coupon-1.png')+')':'url('+require('../../assets/my_bg_coupon.png')+')'}">
              <div style="flex: 5;padding-left: 20px">
                <p style="font-size: 22px;margin-top: 30px">{{item.name}}</p>
                <p v-if="item.type===3">折扣券(仅限购买套餐)</p>
                <p v-if="item.type===2">折扣券(仅限购买套餐)</p>
                <p v-if="item.type===1">折扣券(仅限购买套餐)</p>
              </div>
              <div style="flex: 4;">
                <p style="margin-top: 38px;font-size:14px">满{{item.amount}}可用</p>
                <p>有效期：{{item.expires.substring(0,10)}}</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </scroller>
    <confirm v-model="show" :show-cancel-button="false">
      <p style="text-align:center;font-size: 16px">优惠券领取成功</p>
      <p style="text-align:center;font-size: 12px">我的卡券内可查看领取的卡券</p>
    </confirm>
  </div>
</template>

<script>
  import {XButton, Confirm} from 'vux'
  import Header from './../Header'
  import {Canget, Getcoupon} from '../../api/mine'
  import first from '../../assets/my_bg_coupon.png'
  import second from '../../assets/my_bg_coupon-1.png'

  export default {
    name: 'PayResult',
    data () {
      return {
        first: first,
        second: second,
        couponlist: [],
        show: false
      }
    },
    created () {
      this.type = this.$route.query.typeid
      this.succ = this.$route.query.success
      if (this.$route.query.typeid != 0 && this.$route.query.success == 1) {
        Canget().then(res => {
          this.couponlist = res.data.data
        })
      }
    },
    methods: {
      successOk () {
        this.$router.replace({
          path: '/'
        })
      },
      Receive (item) {
        console.log(item)
        Getcoupon({
          couponId: item.id
        }).then(res => {
          if (res.data.status == 'success') {
            this.show = true
          }
        })

      }
    },
    components: {
      Header,
      XButton,
      Confirm
    },
  }
</script>

<style lang="less" type="text/less">
  .PayResult {
    font-size: 14px;
    .saveinfo {
      width: 65%;
      height: 42px;
      line-height: 42px;
      font-size: 16px;
      margin-top: 24px;
      color: #fff;
      border-radius: 42px;
      background-color: @common-color;
    }
    .Couponinfo {
      height: 120px;
      width: 100%;
      background-repeat: no-repeat;
      background-size: 100% 120px;
      display: flex;
      color: #fff;
      font-size: 12px;
      background-image: url('../../assets/my_bg_coupon.png')
    }
  }
</style>
